<!-- CleaningPipelineGantt.vue -->
<template>
  <div class="cleaning-pipeline">
    <div class="panel-header">
      <h2><el-icon><Timer /></el-icon> 清洗流水线甘特图</h2>
      <div class="time-range">
        <el-tag type="info">2025-08-01 至 2025-08-05</el-tag>
      </div>
    </div>

    <div class="gantt-chart">
      <div ref="ganttChart" class="chart-container"></div>
    </div>

    <div class="pipeline-stats">
      <div class="stats-card">
        <div class="stats-value">{{ totalTime }}<span>ms</span></div>
        <div class="stats-label">总处理时间</div>
      </div>
      <div class="stats-card">
        <div class="stats-value">{{ avgTime }}<span>ms</span></div>
        <div class="stats-label">平均耗时</div>
      </div>
      <div class="stats-card">
        <div class="stats-value">{{ maxTime }}<span>ms</span></div>
        <div class="stats-label">最大耗时</div>
      </div>
    </div>

    <div class="stage-details">
      <h3>处理阶段详情</h3>
      <el-table :data="stageDetails" height="20vh" style="width: 100%">
        <el-table-column prop="stage" label="处理阶段" width="180" />
        <el-table-column prop="startTime" label="开始时间" width="150" />
        <el-table-column prop="endTime" label="结束时间" width="150" />
        <el-table-column prop="duration" label="耗时(ms)" width="120">
          <template #default="{ row }">
            <el-tag :type="getDurationType(row.duration)" size="small">
              {{ row.duration }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template #default="{ row }">
            <el-tag :type="row.status === '成功' ? 'success' : 'danger'" size="small">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import { Timer } from '@element-plus/icons-vue'
import {ElIcon, ElTable, ElTableColumn, ElTag} from "element-plus";

const totalTime = ref(420)
const avgTime = ref(42)
const maxTime = ref(86)

const stageDetails = ref([
  { stage: '数据接收', startTime: '08-01 08:00', endTime: '08-01 08:00', duration: 12, status: '成功' },
  { stage: '格式校验', startTime: '08-01 08:00', endTime: '08-01 08:00', duration: 18, status: '成功' },
  { stage: '异常检测', startTime: '08-01 08:00', endTime: '08-01 08:00', duration: 35, status: '成功' },
  { stage: '噪声过滤', startTime: '08-01 08:00', endTime: '08-01 08:00', duration: 42, status: '成功' },
  { stage: '特征提取', startTime: '08-01 08:00', endTime: '08-01 08:00', duration: 86, status: '成功' },
  { stage: '数据标准化', startTime: '08-01 08:00', endTime: '08-01 08:00', duration: 56, status: '成功' },
  { stage: '结果输出', startTime: '08-01 08:00', endTime: '08-01 08:00', duration: 32, status: '成功' }
])

const ganttChart = ref(null)
let chartInstance = null

const getDurationType = (duration) => {
  if (duration > 70) return 'danger'
  if (duration > 50) return 'warning'
  return 'success'
}

onMounted(() => {
  initGanttChart()

  onBeforeUnmount(() => {
    if (chartInstance) {
      chartInstance.dispose()
    }
  })
})

const initGanttChart = () => {
  if (ganttChart.value) {
    chartInstance = echarts.init(ganttChart.value, 'dark')

    const stages = stageDetails.value.map(item => item.stage)
    const data = stageDetails.value.map((item, index) => {
      return {
        name: item.stage,
        value: [index, 0, item.duration, item.duration],
        itemStyle: {
          color: getDurationColor(item.duration)
        }
      }
    })

    const option = {
      backgroundColor: 'transparent',
      tooltip: {
        formatter: function(params) {
          return `${params.name}<br/>耗时: ${params.value[3]}ms`;
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        top: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        name: '耗时(ms)',
        axisLine: { lineStyle: { color: '#5a7cc9' } },
        splitLine: { lineStyle: { color: 'rgba(93, 102, 224, 0.1)' } },
        axisLabel: { color: '#a0bff0' }
      },
      yAxis: {
        type: 'category',
        data: stages,
        axisLine: { lineStyle: { color: '#5a7cc9' } },
        axisLabel: { color: '#a0bff0' }
      },
      series: [
        {
          type: 'bar',
          data: data,
          barWidth: '60%',
          label: {
            show: true,
            position: 'right',
            formatter: '{c}ms',
            color: '#e4f0ff'
          },
          itemStyle: {
            barBorderRadius: 3
          }
        }
      ]
    }

    chartInstance.setOption(option)

    // 窗口大小变化时重新调整图表
    window.addEventListener('resize', () => {
      if (chartInstance) chartInstance.resize()
    })
  }
}

const getDurationColor = (duration) => {
  if (duration > 70) return '#e74c3c'
  if (duration > 50) return '#f39c12'
  return '#2ecc71'
}
</script>

<style scoped>
.cleaning-pipeline {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5vh 1.5vw;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vh;
}

.panel-header h2 {
  font-size: 1.3rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #4db8ff;
}

.gantt-chart {
  height: 35vh;
  margin-bottom: 2vh;
}

.chart-container {
  width: 100%;
  height: 100%;
}

.pipeline-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2vh;
}

.stats-card {
  flex: 1;
  background: rgba(20, 30, 60, 0.6);
  border-radius: 8px;
  padding: 1.5vh 0;
  text-align: center;
  border: 1px solid rgba(93, 102, 224, 0.2);
  transition: all 0.3s ease;
}

.stats-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(93, 102, 224, 0.2);
  border-color: rgba(93, 102, 224, 0.5);
}

.stats-value {
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(to bottom, #ffffff, #4db8ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5vh;
}

.stats-value span {
  font-size: 1rem;
  margin-left: 4px;
  color: #a0bff0;
}

.stats-label {
  font-size: 0.9rem;
  color: #a0bff0;
}

.stage-details {
  flex: 1;
}

.stage-details h3 {
  font-size: 1.05rem;
  margin: 0 0 1vh;
  color: #c0d1ff;
  font-weight: 500;
}

:deep(.el-table) {
  background-color: transparent;
  color: #e4f0ff;
}

:deep(.el-table th) {
  background-color: rgba(20, 30, 60, 0.6);
  color: #4db8ff;
}

:deep(.el-table tr) {
  background-color: rgba(16, 22, 46, 0.4);
}

:deep(.el-table__row:hover) {
  background-color: rgba(93, 102, 224, 0.2);
}

:deep(.el-table--border) {
  border: 1px solid rgba(93, 102, 224, 0.3);
}

:deep(.el-table--border::after),
:deep(.el-table--group::after),
:deep(.el-table::before) {
  background-color: rgba(93, 102, 224, 0.3);
}
</style>